Hello and welcome to this lecture.
In this lecture we will be creating the ball.
Let's open up the javascript far from the bounce ball for the soul.
So this is the javascript files so these are the variables from our previous lecture.
So to create a ball will need to create a function that would draw or paint a ball on the compass so
to create the function you type in the word function.
Followed by the name you want to keep the function.
Just call it drop for simplicity
and then you include the parenthesis way by using this brand.
This is here in red.
It indicates a function and then to specify what the function is going to do.
We need to include that in curly braces.
So please call it braces and then tab to separate them.
And in between the curly braces is where will specify the instructions that the function draw will perform
when creating any ship.
You need to begin at two methods of functions core.
The first is called to begin with to indicate where the shape will begin from.
So I will create a b c t X..
The city X references the context so be the context Dot be in
half.
Notice the way I retain the name.
Here the method begin.
Path.
So it begins with lower and then upper.
The first letter of the second word is Opper.
Okay so that's the former.
So you begin with two methods here.
The first is a begin and then you've got the city X reference to the contex And there we end it with
a close
close path.
Again notice note is the case lower and then the first letter Opper.
Okay and then we'll put a semicolon there and a semicolon there.
Note is that this sticks here is this variable here that is accessing this get contex which would be
responsible for the drawing.
Any drawing that goes on the combat's.
So we've got the beginning part.
This is where it will start from the drawing of the shape.
And this is where it will end.
In between We'll need to specify various.
We need to define the type of shape we are trying to paint on the canvas.
We do that using bct it's again contex opt for a ball or an arc.
We use hard which will be used to draw like a ball or paint a ball or a circle on the comebacks.
This method here.
This arc method takes in six parameters.
Okay so the first parameter he takes is the x and y axis.
So in this case I'm going to give the X.
Who's going to make it to 20.
That's all it takes.
Now make there why 140.
Okay so this is the x and y coordinates the next parameter it takes is the Ark.
This ark method the radius.
This would mean how round we want this circle to be.
So I'll give it I make it 20
next.
We need to indicate the start angle and the end angle.
So I wanted to start from zero.
Paul comma to separate the value and to to end it.
I'm going to use the javascript Mat's object to create a perfect circle so to do that and do a mass
dot P Hi.
Times two.
So that will create a perfect circle.
So this is the this is where it starts and it will end with this perfect circle here using the javascript
Mat's object of maths.
The final message the final parameters it takes is you have a value to determine if this call will be
clockwise or anticlockwise.
So the default false for clock for clock work if you want it to be clockwise.
It will be false.
The default is anticlockwise which is true such and I made this in a kiss.
Right so this is false.
Which means I want it to be clockwise.
So if I specified true or didn't specify anything then it'll assume the default which is anticlockwise.
So that is the direction in which circle of the ball will be formed.
This barometer here before us determines the direction in which the call is drawn to determine the direction
of the drawing it is optional.
You don't have to include it but if you don't include it it will assume the default which is a. clockwise.
Just remember that okay so we puts we're finished that one put a semicolon no next.
We want to define a method that we can use to give column to the ball or the circle.
So again we go see x dot feel
feel stale.
So what this method will do it will give the kolok to the ball.
So the value of this.
Given it read you can give it whatever you like.
Okay so put semicolon next.
This is a method that will do the fill in next and need to specify the actual feeling to take place.
So this is a method that would do the feel in use in this call or read
and out.
And that with a semi colon.
All right so we are practically done so that there's a method to apply a lot and this city has I feel
is what will do the actual colouring.
This is the end of the ship.
So we've got to begin to where the ships begin.
And then we've got the close and in between.
We've got other methods that are responsible for creating or painting the ball on the compass.
Finally we are going to create an infinite loop that will make the ball painted on the canvas this time
it will repeatedly paint the bore every interval we set so to create an interval into to create an infinite
loop we need to use a javascript font channel called set interval.
So I'll just type in set interval
and then the parameter if I will pass it.
The draw function here which is drawn and then pass in the milliseconds.
I wanted to keep painting the ball on the comeback so pass it value of 10 milliseconds.
So what this meant is that it will paint the ball on the come comebacks every 10 millisecond continuously.
So let's say how I could save this group so far.
What these set interval will do it will it creates an infinite loop.
So what it will allow the draw function to paint or draw a ball on the compass every Meely second forever
until it stops so it's an infinite loop so it will go on painting or this time every 10 milliseconds
it'll paint the ball on the compass.
Okay the code is saved through a lesson view that lets go to the next and try and open the file.
So I click on my index double click while LA so that's the ball that we've created because the ball
is not moving at the moment.
You will not notice that it's being repainted constantly because of the infinite loop of this set interval.
This is because the ball is not moving so you don't notice it but it's actually repainting.
Each time every 10 milliseconds.
So that's it for this lecture on drawing the ball.
Apologize if it's taken too long on this lecture in the next lecture.
We are going to try to move the ball.
Thank you for watching.
Bye for an hour.